<template>
  <div class="page_user">
    <!-- 页头 -->
    <van-nav-bar title="我的" style="background-color: #4fc08d" />
    <!-- 头像 -->
    <div class="myuser">
      <van-row gutter="20">
        <van-col span="8" style="padding: 1.2rem 0">
          <div>
            <p>余额</p>
            <p style="margin: 0.3rem 0 0.6rem">100.00</p>
            <p>充值</p>
          </div>
        </van-col>
        <van-col span="8">
          <van-image
            round
            fit="cover"
            width="5rem"
            height="5rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <p style="font-size: 0.9rem; padding: 0.2rem 0 10px">娇娇女</p>
          <div
            style="
              color: #4fc08d;
              width: 5rem;
              height: 1.2rem;
              border-radius: 0.6rem;
              background-color: gray;
              line-height: 1.2rem;
              margin: auto;
            "
          >
            普通会员
          </div>
        </van-col>
        <van-col span="8" style="padding: 1.5rem 0">
          <p>积分</p>
          <p style="padding: 0.6rem 0">89</p>
        </van-col>
      </van-row>
    </div>
    <!-- 我的订单 -->
    <van-cell value="全部订单" is-link :border="false">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">我的订单</span>
      </template>
    </van-cell>
    <!-- 商品导航栏 -->
    <van-grid>
      <van-grid-item badge="1" icon="balance-pay" text="待付款" />
      <van-grid-item icon="send-gift-o" text="待发货" />
      <van-grid-item icon="paid" text="待收货" />
      <van-grid-item icon="gold-coin-o" text="退换货" />
    </van-grid>
    <!-- 优惠券 -->
    <div style="margin-top: 0.8rem">
      <van-cell :border="false" title="用户信息" icon="point-gift-o" is-link>
      </van-cell>
      <van-cell
        title="我的购物车"
        icon="shopping-cart-o"
        is-link
        :border="false"
      >
      </van-cell>
      <van-cell title="我的评价" icon="like-o" is-link :border="false">
      </van-cell>
      <van-cell url="/address" title="收货地址管理" icon="shop-o" is-link :border="false">
      </van-cell>
      <van-cell title="账户与安全" icon="bill-o" is-link :border="false">
      </van-cell>
    </div>
    <!-- 页尾 -->
       
    <MyFoot></MyFoot>
  </div>
</template>

<script>
import MyFoot from "../components/MyFoot.vue";
export default {
  components: { MyFoot },
  data() {
    return {
      // myfoot: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.myuser {
  background-color: #4fc08d;
  padding: 1.2rem;
  text-align: center;
  font-size: 0.8rem;
  color: white;
}
::v-deep [class*="van-hairline"]::after {
  position: static;
}
.van-hairline--bottom {
  border: 0.06rem solid #4fc08d;
}
</style>
